<template>
  <Page>
    <ARow :gutter="[0, 16]">
      <ACol :span="24">
        <ASpace>
          <!-- v-model:value="range" -->
          <!-- :default-value="range" -->
          <!-- value-format="MM-DD" -->
          <ARangePicker v-model:value="range" format="YYYY-MM" />
          <span>{{ range.map((day) => day?.format('YYYY-MM-DD')) }}</span>
        </ASpace>
      </ACol>
      <ACol :span="24">
        <ASpace>
          <ARangePicker v-model:value="rangeFormat" format="YYYY-MM" value-format="YYYY" />
          <span>{{ rangeFormat }}</span>
        </ASpace>
      </ACol>
      <ACol :span="24">
        <ASpace>
          <ExRangePicker v-model:value="range" format="YYYY-MM" value-format="YYYY" />
        </ASpace>
      </ACol>
      <ACol :span="24">
        <ASpace>
          <ExRangePicker value-format="YYYY-MM-DD HH:mm:ss" />
        </ASpace>
      </ACol>
    </ARow>
  </Page>
</template>

<script setup lang="ts">
import type { Dayjs } from 'dayjs'
import dayjs from 'dayjs'

const range = ref<[Dayjs, Dayjs]>([dayjs('2023-02-22'), dayjs('2023-02-24')])
const rangeFormat = ref<[string, string]>(['2023-02-24', '2023-02-28'])
</script>

<style scoped></style>
